<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>websocket测试</title>
  </head>
  <body>
    <button id="button">按钮</button>
    <input type="text" id="demo" />
    <div id="res">接收到的服务器端消息显示区域</div>
  </body>
</html>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  // 打开一个 web socket，设定websocket服务器地址和端口
  var ws = new WebSocket("ws://127.0.0.1:3000");

  //开启连接open后客户端处理方法
  ws.open = function () {
    // Web Socket 已连接上，在页面中显示消息
    document.getElementById("res").innerHTML =
      "当前客户端已经连接到websocket服务器";

    // 点击按钮时给websocket服务器端发送消息
    $("#btn").click(function () {
      var value = $("#demo").val();
    });
  };
</script>
